<template>
  <div
    class="footer-nav"
    :class="classObj"
  >
    <slot></slot>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: 'FooterNav',
  computed: {
    ...mapState({
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      showSettings: state => state.settings.showSettings,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile',
        footerLeft: this.align === 'left',
        footerRight: this.align === 'right',
      }
    }
  },
  props: {
    align: {
      type: String,
      default: 'left'
    }
  }
}
</script>

<style scoped lang="scss">
.footer-nav{
  position: fixed;
  bottom: 0;
  height: 55px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 10px;
  border-top: 1px solid #e6ebf5;
  background-color: #ffffff;
  z-index: 2000;
  width: 100%;
  //margin-left: -30px;
  //width: 1000px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.openSidebar.footer-nav{
  width: calc(100% - 210px);
}
.hideSidebar.footer-nav{
  width: calc(100% - 54px);
}
.footerLeft.footer-nav{
  text-align: left;
}
.footerRight.footer-nav{
  text-align: right;
}
</style>
